<template>
  <div  class="htmlCon">
      <div>
          <div>
              <div >
                  <el-collapse  :class="moods" v-model="activeName" accordion>
                    <el-collapse-item title="VUE的简单使用(2.x)" name="1" disabled>
                      <div><i class="iconfont icon-vue"></i><h2>安装vue或者使用CDN链接</h2></div>
                      <pre>
        npm install -g @vue/cli // 基于node
        # OR
        yarn global add @vue/cli // 基于node
        # OR
        &lt;script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&gt;&lt;/script&gt; // 将连接引入到自己的项目即可
        <h3>基础使用</h3>
       
            我们需要使用new来调用vue
            el: "app" 表示我们绑定的元素id
            data: { .. } 是我们的数据
            new Vue({
                el: "app",
                data: {
                    key: value
                }
            })
            &lt;div&gt;{{}} &lt;/div&gt; 我们在dom中可以直接读取data中的数据写法是两个花括号中间是key
         
                      </pre>
                    </el-collapse-item>
                    </el-collapse>
              </div>
          </div>
      </div>
         <div>
               
          </div>
  </div>
</template>

<script>
export default {
    name: "BasicFrame",
    data(){
        return {
            activeName: ["1"],
            moods: "conWrapper",
        }
    },
    methods: {
        basicData(){
            window.scrollTo(100,120);
        },
        variable(){
            window.scrollTo(100,600);
        },
        testData(){
            window.scrollTo(100,900);
        },
        fun(){
            window.scrollTo(100,1350);
        },
        symbol(){
            window.scrollTo(100,1350);
        },
        ifs(){
            window.scrollTo(100,1350);
        },
        top(){
            window.scrollTo(100,0);
        }
        
    }
}
</script>

<style scoped>

.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
.htmlNav {
  position: fixed;
}
</style>